<template>
  <div class="wrapper">
    <v-avatar class="avatar" size="36" color="rgb(250,114,152)">
      <img src="@/assets/picture/avatar.jpg" alt="头像" />
    </v-avatar>
    <span class="search"><v-icon class="vicon">mdi-magnify</v-icon></span>
    <svg class="icon game" aria-hidden="true">
      <use xlink:href="#icon-game" />
    </svg>
    <v-icon class="vicon2">mdi-email-outline</v-icon>
  </div>
</template>

<script>
export default {
  name: "IndexHeader"
};
</script>
<style lang="stylus" scoped>
.wrapper
  display flex
  align-items center
  .avatar
    margin 5px 10px
  .search
    background-color rgb(229,103,140)
    width 58%
    height 60%
    margin-right 20px
    border-radius 30px
    .vicon
      color rgb(233,170,187)
      padding-left 5px
      padding-top 5px
      font-size 20px
  .game
    margin-right 20px
    font-size 25px
    color #ffffff
  .vicon2
    color #ffffff
</style>
